<template>
  <div>
    <!-- <pre>{{ tempData }}</pre> -->
    <el-table
      size="small"
      style="width: 100%"
      v-loading="loading"
      header-row-class-name="info-row"
      highlight-current-row
      :data="tableByPage"
      row-key="id"
    >
      <el-table-column label="" v-if="useList" width="60px">
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.isChecked"
            @change="checkedIt($event, scope.row)"
          >
          </el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="callId">
        <template slot-scope="scope">{{ scope.row.callId }}</template>
      </el-table-column>
      <el-table-column label="拨打时间" width="160px">
        <template slot-scope="scope">{{ scope.row.callTime }}</template>
      </el-table-column>
      <el-table-column label="员工">
        <template slot-scope="scope">{{ scope.row.realName }}</template>
      </el-table-column>
      <el-table-column label="时长" width="100px">
        <template slot-scope="scope">
          {{ scope.row.lastCallLengthString }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160px">
        <template slot-scope="scope">
          <el-button size="mini" @click="try2play(scope.row)" type="text">
            <i
              :class="{
                'fa': true,
                'fa-fw': true,
                'fa-play': scope.row.soundState == 0,
                'text-green': scope.row.soundState == 0,
                'fa-stop': scope.row.soundState == 2,
                'text-red': scope.row.soundState == 2,
              }"
            ></i
            >播放
          </el-button>
          <el-button size="mini" @click="download(scope.row)" type="text">
            <i class="fa fa-fw fa-download"></i>下载
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="align-rm" ref="pag">
      <!-- prettier-ignore -->
      <el-pagination
        @size-change="handleSizeChange($event,ajaxData);"
        @current-change="handleCurrentChange($event,ajaxData);"
        :current-page="page.current"
        :page-sizes="page.sizes"
        :page-size="page.size"
        layout="total, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>
    <audio ref="audio" autoplay="autoplay" :src="tempUrl"></audio>
  </div>
  <!-- prettier-ignore -->
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { bus } from '@/main.js';
import pagination from '@/mixin/pagination.vue';
import tableList from '@/mixin/tableList.vue';
export default {
  name: 'index',
  mixins: [tableList, pagination],
  components: {},
  props: {
    tempData: {
      type: Object,
      default: function() {
        return {};
      },
    },
    tempList: {
      type: Array,
      default: function() {
        return [];
      },
    },
    useList: {
      type: Boolean,
      default: function() {
        return false;
      },
    },
  },
  data() {
    return {
      isDev: process.env.NODE_ENV !== 'development',
      tempUrl: '',
    };
  },
  computed: {
    ...mapState([]),
    tableByPage: function() {
      let td = this.tableList.map(v => {
        let idx = this.tempList.findIndex(i => {
          return i.callId == v.callId;
        });
        return Object.assign(v, {
          isChecked: idx > -1,
        });
      });
      return td;
    },
  },
  methods: {
    ...mapMutations([]),
    format: function(item) {
      item['soundState'] = 0;
      item['isChecked'] = false;
      return item;
    },
    ajaxData: function() {
      this.loading = true;
      bus.$emit('录音stop', {});
      let pn0 = this._.get(this.tempData, 'phoneNumber', '');
      let ap0n = this._.get(this.tempData, 'allPhoneNumber[0].phoneNumber', '');
      let arg = Object.assign(
        {},
        this.$store.getters['userInfo/getEmployee'],
        {
          phoneNumber: this._.isEmpty(pn0) ? ap0n : pn0, //string 手机号//测试用: 13800001111
          phoneNumber1: this._.get(this.tempData, 'phoneNumber1', ''), //string 第二号码
          phoneNumber2: this._.get(this.tempData, 'phoneNumber2', ''), //string 第三号码
        },
        {
          eS_Company_Id: this._.get(this.tempData, 'eS_Company_Id', ''),
          external_userid: this._.get(this.tempData, 'external_userid', ''),
          start: this._.get(this.page, 'page', 1),
          length: this._.get(this.page, 'size', 5),
        },
        // {
        //   company_Department_Company_Id: "105",
        //   company_Employee_Id: 3,
        //   eS_Company_Id: "wweb37ed3269887b08",
        //   external_userid: "wmAG70DQAAeCgtalEKhPbX7E2x9Mz7DA",
        //   length: 5,
        //   start: 1,
        // }
      );
      this.$api.录音列表
        .get({}, arg)
        .then(res => {
          if (res.code === 200) {
            return Promise.resolve(res.data);
          }
        })
        .then(res => {
          this.page.total = res.recordsTotal;
          this.clearTable();
          res.data.forEach(v => {
            v.soundState = 0;
            this.addTableRow(this.format(v));
          });
        })
        .catch(err => {
          console.error(err);
        })
        .finally(_ => {
          this.loading = false;
        });
    },
    try2play(item) {
      this.tableList.forEach(v => {
        if (v != item) {
          v.soundState = 0;
        }
      });
      if (item.soundState == 0) {
        bus.$emit('录音play', {
          soundAddress: item.soundAddress,
        });
        // this.tempUrl = item.soundAddress;
        // this.$refs.audio.play();
        item.soundState = 2;
      } else {
        bus.$emit('录音stop', {});
        // this.tempUrl = "";
        // this.$refs.audio.pause();
        item.soundState = 0;
      }
      this.$refs.audio.onended = event => {
        item.soundState = 0;
      };
    },
    download(item) {
      let fileName = item.soundAddress.split('/').reverse()[0];
      bus.$emit('download', {
        url: item.soundAddress,
        fileName: fileName,
      });
    },
    checkedIt(e, r) {
      bus.$emit('增减tempList', {
        action: e ? 'add' : 'remove',
        callId: this._.get(r, 'callId', ''),
        url: this._.get(r, 'soundAddress', ''),
      });
    },
  },
  mounted: function() {
    // this.ajaxData();
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less"></style>
